<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="试卷名称" prop="title">
        <el-input v-model="queryParams.title"
                  placeholder="请输入试卷名称"
                  clearable
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary"
                   plain
                   icon="el-icon-plus"
                   size="mini"
                   @click="handleAdd"
                   v-hasPermi="['system:paper:add']">新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success"
                   plain
                   icon="el-icon-edit"
                   size="mini"
                   :disabled="single"
                   @click="handleUpdate"
                   v-hasPermi="['system:paper:edit']">修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger"
                   plain
                   icon="el-icon-delete"
                   size="mini"
                   :disabled="multiple"
                   @click="handleDelete"
                   v-hasPermi="['system:paper:remove']">删除
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="paperList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="序号" align="center" prop="id"/>
      <el-table-column label="试卷名称" align="center" prop="title" :show-overflow-tooltip="true"/>
      <el-table-column label="试卷描述" align="center" prop="questDesc" :show-overflow-tooltip="true"/>
      <el-table-column label="试卷题目数量" align="center" prop="questionCount"/>
      <el-table-column label="试卷题目最大分" align="center" prop="score"/>
      <el-table-column label="创建时间" align="center" prop="createTime" width="160">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <!--          <el-button size="mini"-->
          <!--                     type="text"-->
          <!--                     icon="el-icon-data-analysis"-->
          <!--                     @click="handleAnalyzeAnswers(scope.row)"-->
          <!--                     v-hasPermi="['system:paper:query']">答卷分析-->
          <!--          </el-button>-->
          <el-button size="mini"
                     type="text"
                     icon="el-icon-view"
                     @click="handleViewAnswers(scope.row)"
                     v-hasPermi="['system:paper:query']">查看答卷
          </el-button>
          <el-button size="mini"
                     type="text"
                     icon="el-icon-edit"
                     @click="handleUpdate(scope.row)"
                     v-hasPermi="['system:paper:edit']">修改
          </el-button>
          <el-button size="mini"
                     type="text"
                     icon="el-icon-delete"
                     @click="handleDelete(scope.row)"
                     v-hasPermi="['system:paper:remove']">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"/>

    <!-- 添加或修改试卷信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="试卷名称" prop="title">
          <el-input v-model="form.title" placeholder="请输入试卷名称"/>
        </el-form-item>
        <el-form-item label="试卷描述" prop="questDesc">
          <el-input v-model="form.questDesc" placeholder="请输入试卷描述"/>
        </el-form-item>
        <el-form-item label="试卷题目">
          <el-button type="success" @click="addQuestion" size="mini" style="margin-bottom: 15px">
            <i class="el-icon-plus"></i> 添加题目
          </el-button>
          <el-card class="exampaper-item-box" v-if="form.questionItems && form.questionItems.length > 0">
            <el-form-item :key="questionItem.id || questionIndex" :label="'题目'+(questionIndex+1)+'：'"
                          v-for="(questionItem,questionIndex) in form.questionItems" style="margin-bottom: 15px">
              <el-row>
                <el-col :span="23">
                  <QuestionShow :qType="questionItem.questionType" :question="questionItem"/>
                </el-col>
                <el-col :span="1">
                  <el-button type="text" size="mini" @click="removeQuestion(questionIndex)" style="color: #f56c6c">
                    <i class="el-icon-delete"></i>
                  </el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-card>
          <div v-else class="no-questions-tip">
            <i class="el-icon-info"></i> 暂无题目，请点击"添加题目"按钮添加
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 题目弹出框 -->
    <el-dialog :visible.sync="questionPage.showDialog" width="70%">
      <el-form :model="questionPage.queryParam" ref="queryForm" :inline="true">
        <el-form-item label="题目题型：">
          <el-select v-model="questionPage.queryParam.questionType" clearable>
            <el-option v-for="item in dict.type.question_type" :key="item.value" :value="item.value"
                       :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目分类：">
          <el-select v-model="questionPage.queryParam.questionClassification" clearable>
            <el-option v-for="item in dict.type.question_Classification" :key="item.value" :value="item.value"
                       :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryForm">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="questionPage.listLoading" :data="questionPage.tableData"
                @selection-change="handleSelectionChange1" border fit highlight-current-row style="width: 100%">
        <el-table-column type="selection" width="35"></el-table-column>
        <el-table-column prop="id" label="Id" width="60px"/>
        <el-table-column prop="questionType" label="题型" width="70px">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.question_type" :value="scope.row.questionType"/>
          </template>
        </el-table-column>
        <el-table-column prop="questionTitle" label="题干" show-overflow-tooltip/>
      </el-table>
      <pagination v-show="questionPage.total>0"
                  :total="questionPage.total"
                  :page.sync="questionPage.queryParam.pageNum"
                  :limit.sync="questionPage.queryParam.pageSize"
                  @pagination="search"/>
      <span slot="footer" class="dialog-footer">
          <el-button @click="questionPage.showDialog = false">取 消</el-button>
          <el-button type="primary" @click="confirmQuestionSelect">确定</el-button>
     </span>
    </el-dialog>

    <!-- 答卷分析对话框 -->
    <el-dialog title="答卷分析" :visible.sync="analysisDialog.visible" width="80%" append-to-body>
      <div v-loading="analysisDialog.loading">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card class="analysis-card">
              <div slot="header" class="card-header">
                <span>题型分析</span>
              </div>
              <div ref="questionTypeChart" style="height: 400px;"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="analysis-card">
              <div slot="header" class="card-header">
                <span>分数分布</span>
              </div>
              <div ref="scoreChart" style="height: 400px;"></div>
            </el-card>
          </el-col>
        </el-row>
        <!--        <el-row :gutter="20" style="margin-top: 20px;">-->
        <!--          <el-col :span="24">-->
        <!--            <el-card class="analysis-card">-->
        <!--              <div slot="header" class="card-header">-->
        <!--                <span>题目正确率分析</span>-->
        <!--              </div>-->
        <!--              <div ref="accuracyChart" style="height: 400px;"></div>-->
        <!--            </el-card>-->
        <!--          </el-col>-->
        <!--        </el-row>-->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="analysisDialog.visible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 用户答卷分析（仅该用户，题型统计） -->
    <el-dialog title="用户答卷分析" :visible.sync="userAnalysisDialog.visible" width="60%" append-to-body>
      <div v-loading="userAnalysisDialog.loading">
        <el-row :gutter="24" style="margin-bottom: 10px;">
          <el-col :span="6">
            <span>用户：{{ userAnalysisDialog.name || '匿名用户' }}</span>
          </el-col>
          <el-col :span="6">
            <span>学校：{{ userAnalysisDialog.school || '未填写学校' }}</span>
          </el-col>
          <el-col :span="6">
            <span>联系方式：{{ userAnalysisDialog.phone || '未填写联系方式' }}</span>
          </el-col>
        </el-row>
        <el-table :data="userAnalysisDialog.questionTypeStats" border style="width: 100%"
                  :header-cell-style="{ background: '#f5f7fa', color: '#606266' }">
          <el-table-column prop="name" label="题目分类" align="center"/>
          <el-table-column prop="count" label="题目数量" align="center" width="120"/>
          <el-table-column prop="totalScore" label="总得分" align="center" width="120"/>
          <el-table-column label="平均分" align="center" width="120">
            <template slot-scope="scope">
              {{ scope.row.count > 0 ? (scope.row.totalScore / scope.row.count).toFixed(1) : 0 }}
            </template>
          </el-table-column>
        </el-table>
        <div v-if="!userAnalysisDialog.questionTypeStats || userAnalysisDialog.questionTypeStats.length === 0"
             class="no-data-tip">
          <i class="el-icon-document"></i>
          <p>暂无题型统计数据</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userAnalysisDialog.visible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 查看答卷对话框 -->
    <el-dialog title="查看答卷" :visible.sync="answerListDialog.visible" width="80%" append-to-body>
      <div v-loading="answerListDialog.loading">
        <!-- 筛选栏：学校选择 -->
        <el-form inline label-width="90px" class="filter-bar">
          <el-form-item label="姓名">
            <el-input v-model="answerListDialog.queryParams.name" placeholder="请输入姓名" clearable
                      style="width: 220px" @input="onSchoolFilterChange"/>
          </el-form-item>
          <el-form-item label="学校名称">
            <el-select v-model="answerListDialog.queryParams.school" placeholder="选择学校" clearable filterable
                       style="width: 220px" @change="onSchoolFilterChange">
              <el-option v-for="school in answerListDialog.schoolOptions" :key="school.id" :label="school.title"
                         :value="school.title"/>
            </el-select>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="answerListDialog.queryParams.phone" placeholder="请输入联系方式" clearable
                      style="width: 220px" @input="onSchoolFilterChange"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleAnalyzeAnswers01">答案分析</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="20">
          <el-col :span="6" v-for="(answer, index) in answerListDialog.answerList" :key="answer.id || index">
            <el-card class="answer-card" shadow="hover" @click.native="handleViewAnswerDetail(answer)">
              <div class="answer-card-header">
                <div class="user-info">
                  <div class="user-avatar">{{ answer.name ? answer.name.charAt(0) : 'U' }}</div>
                  <div class="user-details">
                    <span class="user-name">{{ answer.name || '匿名用户' }}</span>
                    <span class="user-school">
                      <i class="el-icon-office-building"></i>
                      {{ answer.school || '未填写学校' }}
                    </span>
                  </div>
                </div>
                <div class="score-info">
                  <div class="score-main">{{ answer.score || 0 }}</div>
                  <div class="score-total">/ {{ answerListDialog.totalScore || 0 }}</div>
                </div>
              </div>
              <div class="answer-meta">
                <div class="meta-left">
                  <i class="el-icon-time"></i>
                  {{ formatTime(answer.createTime) }}
                </div>
                <div class="meta-right">
                  <el-button type="text" size="mini"
                             @click.stop="handleUserAnalyze(answer)">
                    答卷分析
                  </el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <!-- 无数据提示 -->
        <div v-if="answerListDialog.answerList.length === 0" class="no-data-tip">
          <i class="el-icon-document"></i>
          <p>暂无答卷数据</p>
        </div>
      </div>
      <!-- 分页 -->
      <pagination v-show="answerListDialog.total > 0"
                  :total="answerListDialog.total"
                  :page.sync="answerListDialog.queryParams.pageNum"
                  :limit.sync="answerListDialog.queryParams.pageSize"
                  @pagination="getAnswerList"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="answerListDialog.visible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 答卷详情对话框 -->
    <el-dialog title="答卷详情" :visible.sync="answerDetailDialog.visible" width="90%" append-to-body>
      <div v-loading="answerDetailDialog.loading">
        <!-- 用户信息和分数 -->
        <el-card class="detail-header-card" shadow="never">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="detail-info-item">
                <label>用户姓名：</label>
                <span>{{ answerDetailDialog.answerDetail.name || '匿名用户' }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="detail-info-item">
                <label>联系方式：</label>
                <span>{{ answerDetailDialog.answerDetail.phone || '匿名用户' }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="detail-info-item">
                <label>学校：</label>
                <span>{{ answerDetailDialog.answerDetail.school || '未填写学校' }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="detail-info-item">
                <label>得分：</label>
                <el-tag size="medium">
                  {{ answerDetailDialog.answerDetail.score || 0 }} /
                  {{ answerListDialog.totalScore || 0 }}
                </el-tag>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-info-item">
                <label>完成时间：</label>
                <span>{{ formatTime(answerDetailDialog.answerDetail.createTime) }}</span>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 试卷信息 -->
        <el-card class="detail-paper-card" shadow="never">
          <div slot="header" class="card-header">
            <span>试卷信息</span>
          </div>
          <div class="detail-info-item">
            <label>试卷名称：</label>
            <span>{{ answerDetailDialog.answerDetail.title }}</span>
          </div>
        </el-card>

        <!-- 题目分类统计 -->
        <el-card class="classification-stats-card" shadow="never">
          <div slot="header" class="card-header">
            <span>题目分类统计</span>
          </div>
          <el-table
            :data="calculateClassificationStatistics()"
            border
            style="width: 100%"
            :header-cell-style="{ background: '#f5f7fa', color: '#606266' }">
            <el-table-column prop="name" label="题目分类" align="center" width="200">
              <template slot-scope="scope">
                <el-tag :type="scope.row.name === '未分类' ? 'info' : 'primary'">
                  {{ scope.row.name }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="count" label="题目数量" align="center" width="150">
              <template slot-scope="scope">
                <span class="count-text">{{ scope.row.count }} 题</span>
              </template>
            </el-table-column>
            <el-table-column prop="totalScore" label="总得分" align="center" width="150">
              <template slot-scope="scope">
                <span class="score-text">{{ scope.row.totalScore }} 分</span>
              </template>
            </el-table-column>
            <el-table-column label="平均分" align="center">
              <template slot-scope="scope">
                <span class="avg-score-text">
                  {{ scope.row.count > 0 ? (scope.row.totalScore / scope.row.count).toFixed(1) : 0 }} 分/题
                </span>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="calculateClassificationStatistics().length === 0" class="no-data-tip">
            <i class="el-icon-document"></i>
            <p>暂无分类统计数据</p>
          </div>
        </el-card>

        <!-- 用户答案 -->
        <el-card class="detail-answers-card" shadow="never">
          <div slot="header" class="card-header">
            <span>用户答案</span>
          </div>
          <div v-for="(question, index) in answerDetailDialog.paperInfo" :key="question.id"
               class="question-answer-item">
            <div class="question-header">
              <span class="question-number">第{{ index + 1 }}题</span>
            </div>
            <!-- 题目展示 -->
            <div class="question-content">
              <QuestionShow :qType="question.questionType" :question="question"/>
            </div>
            <!-- 题目选项 -->
            <div class="question-options" v-if="question.options && question.options.length > 0">
              <label>题目选项：</label>
              <div class="options-list">
                <div v-for="option in question.options" :key="option.id || option.prefix" class="option-item">
                  <span class="option-prefix">{{ option.prefix }}.</span>
                  <span class="option-content" v-html="option.content"></span>
                  <span class="option-score">{{ option.score || 0 }}分</span>
                </div>
              </div>
            </div>
            <!-- 答案对比 -->
            <div class="answer-content">
              <div class="user-answer">
                <label>用户答案：</label>
                <span class="answer-text" :class="{ 'correct': question.isCorrect, 'incorrect': !question.isCorrect }"
                      v-html="formatUserAnswer(question)">
                </span>
              </div>
              <!--              <div class="correct-answer">-->
              <!--                <label>正确答案：</label>-->
              <!--                <span class="answer-text correct" v-html="formatCorrectAnswer(question)">-->
              <!--                </span>-->
              <!--              </div>-->
            </div>
          </div>
        </el-card>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="answerDetailDialog.visible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import QuestionShow from '@/views/system/question/components/Show'
import {getQuestion, listQuestion} from "@/api/system/question"
import {addPaper, delPaper, getPaper, listPaper, updatePaper} from "@/api/system/paper"
import {listSchool} from "@/api/system/school"
import {getAnswer, listAnswer, listAnswerByPaperId, listAnswerStatistics} from "@/api/system/answer"
import {getDicts} from "@/api/system/dict/data"


export default {
  name: "Paper",
  components: {QuestionShow},
  dicts: ['question_type', 'question_Classification'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 试卷信息表格数据
      paperList: [],
      question_ClassificationOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        score: null,
        frameTextContent: null,
        questionCount: null,
      },
      questionPage: {
        multipleSelection: [],
        showDialog: false,
        queryParam: {
          id: null,
          questionType: null,
          questionClassification: null,
          subjectId: 1,
          pageIndex: 1,
          pageSize: 10
        },
        listLoading: true,
        tableData: [],
        total: 0
      },

      // 表单参数
      form: {
        id: null,
        title: null,
        score: null,
        frameTextContent: [],
        questionItems: [],
        questionCount: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
      },
      // 表单校验
      rules: {},

      // 答卷列表对话框
      answerListDialog: {
        visible: false,
        paperId: null,
        title: '',
        answerList: [],
        totalScore: null,
        total: 0,
        schoolOptions: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          examPaperId: null,
          school: null,
          phone: null,
          name: null
        },
        loading: false,
        school: null,
        phone: null,
        name: null
      },

      // 答卷详情对话框
      answerDetailDialog: {
        visible: false,
        answerDetail: {},
        pageInfo: [],
        questionAnswers: []
      },

      // 答卷分析对话框
      analysisDialog: {
        visible: false,
        loading: false,
        paperId: null,
        paperTitle: '',
        analysisData: {
          questionTypeStats: [],
          scoreDistribution: [],
          accuracyStats: []
        }
      },

      // 用户答卷分析对话框（仅该用户，题型统计）
      userAnalysisDialog: {
        visible: false,
        loading: false,
        name: '',
        school: '',
        phone: '',
        answer: null,
        questionTypeStats: []
      }
    }
  },
  created() {
    getDicts("question_classification").then(response => {
      this.question_ClassificationOptions = response.data
    })
    listSchool({pageNum: 1, pageSize: 1000000}).then(response => {
      this.answerListDialog.schoolOptions = response.rows
    })
    this.getList()
  },
  computed: {
    /** 根据选中的学校筛选答卷列表 */
    filteredAnswerList() {
      const list = this.answerListDialog.answerList || []
      const school = this.answerListDialog.queryParams.school
      if (!school) return list
      return list.filter(item => item && item.school === school)
    }
  },
  methods: {
    /** 查询试卷信息列表 */
    getList() {
      this.loading = true
      listPaper(this.queryParams).then(response => {
        this.paperList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    addQuestion() {
      // 清空之前的选择
      this.questionPage.multipleSelection = []
      this.questionPage.showDialog = true
      this.search()
    },
    removeQuestion(index) {
      if (index < 0 || index >= this.form.questionItems.length) {
        this.$modal.msgError("删除失败：题目索引无效")
        return
      }

      const question = this.form.questionItems[index]
      const questionTitle = question.questionTitle || `题目${index + 1}`

      this.$modal.confirm(`确定要删除题目"${questionTitle}"吗？`).then(() => {
        // 使用splice删除并强制更新
        this.form.questionItems.splice(index, 1)
        // 强制触发响应式更新
        this.$forceUpdate()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {
        // 用户取消删除，不做任何操作
      })
    },
    queryForm() {
      this.questionPage.queryParam.pageNum = 1
      this.search()
    },
    search() {
      this.questionPage.listLoading = true
      listQuestion(this.questionPage.queryParam).then(data => {
        this.questionPage.tableData = data.rows
        this.questionPage.total = data.total
        this.questionPage.listLoading = false
      })
    },
    confirmQuestionSelect() {
      if (!this.questionPage.multipleSelection || this.questionPage.multipleSelection.length === 0) {
        this.$modal.msgWarning("请选择要添加的题目")
        return
      }

      let _this = this
      let promises = []
      let existingIds = this.form.questionItems.map(item => item.id)

      this.questionPage.multipleSelection.forEach(q => {
        // 检查是否已存在该题目
        if (existingIds.includes(q.id)) {
          this.$modal.msgWarning(`题目"${q.questionTitle}"已存在，跳过添加`)
          return
        }

        let promise = getQuestion(q.id).then(re => {
          console.log(re)
          // 使用push添加新题目，确保响应式更新
          _this.form.questionItems.push(re.data)
          // 或者使用Vue.set确保响应式
          // _this.$set(_this.form.questionItems, _this.form.questionItems.length, re.data)
        }).catch(error => {
          console.error('获取题目详情失败:', error)
          _this.$modal.msgError(`获取题目"${q.questionTitle}"详情失败`)
        })
        promises.push(promise)
      })

      // 等待所有异步请求完成后再关闭对话框
      Promise.all(promises).then(() => {
        // 强制触发响应式更新
        _this.$forceUpdate()
        _this.questionPage.showDialog = false
        _this.questionPage.multipleSelection = []
        _this.$modal.msgSuccess(`成功添加 ${promises.length} 道题目`)
      }).catch(() => {
        _this.questionPage.showDialog = false
        _this.questionPage.multipleSelection = []
      })
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        title: null,
        score: null,
        frameTextContent: [],
        questionItems: [],
        questionCount: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
      }
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    handleSelectionChange1(val) {
      this.questionPage.multipleSelection = val
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "添加试卷信息"
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getPaper(id).then(response => {
        this.form = response.data
        // 将frameTextContent中的题目提取到questionItems中
        if (this.form.frameTextContent && this.form.frameTextContent.length > 0) {
          this.form.questionItems = []
          this.form.frameTextContent.forEach(titleItem => {
            if (titleItem.questionItems && titleItem.questionItems.length > 0) {
              this.form.questionItems.push(...titleItem.questionItems)
            }
          })
        } else {
          this.form.questionItems = []
        }
        this.open = true
        this.title = "修改试卷信息"
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 在提交前将questionItems转换为frameTextContent格式
          if (this.form.questionItems && this.form.questionItems.length > 0) {
            this.form.frameTextContent = [{
              name: '试卷题目',
              questionItems: this.form.questionItems
            }]
          } else {
            this.form.frameTextContent = []
          }

          if (this.form.id != null) {
            updatePaper(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            })
          } else {
            addPaper(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除试卷信息编号为"' + ids + '"的数据项？').then(function () {
        return delPaper(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/paper/export', {
        ...this.queryParams
      }, `paper_${new Date().getTime()}.xlsx`)
    },

    /** 答卷分析按钮操作 */
    handleAnalyzeAnswers(row) {
      this.analysisDialog.paperId = row.id
      this.analysisDialog.paperTitle = row.title
      this.analysisDialog.visible = true
      this.analysisDialog.loading = true
      this.getAnalysisData(row.id)
    },

    /** 答卷分析按钮操作 */
    handleAnalyzeAnswers01() {
      this.answerListDialog.queryParams.pageNum = null;
      this.answerListDialog.queryParams.pageSize = null;

      this.analysisDialog.visible = true
      this.analysisDialog.loading = true
      this.getAnalysisData01(this.answerListDialog.queryParams);
    },




    /** 获取分析数据 */
    getAnalysisData(paperId) {
      console.log('getAnalysisData', paperId)
      listAnswerByPaperId(paperId).then(response => {
        // 模拟获取分析数据，实际应该调用后端API
        setTimeout(() => {
          const scoreDistribution = response.data.questionScoreStatistics
          const questionTypeStats = response.data.classificationStatistics
          console.log('questionTypeStats', questionTypeStats)
          console.log('scoreDistribution', scoreDistribution)
          // 模拟题型分析数据
          // const questionTypeStats = [
          //   { name: '单选题', count: 15, totalScore: 30, avgScore: 25.5 },
          //   { name: '多选题', count: 8, totalScore: 24, avgScore: 18.2 },
          //   { name: '判断题', count: 10, totalScore: 10, avgScore: 8.7 },
          //   { name: '填空题', count: 5, totalScore: 15, avgScore: 12.3 },
          //   { name: '简答题', count: 3, totalScore: 21, avgScore: 16.8 }
          // ]
          //
          // // 模拟分数分布数据
          // const scoreDistribution = [
          //   { range: '0-20', count: 2 },
          //   { range: '21-40', count: 5 },
          //   { range: '41-60', count: 12 },
          //   { range: '61-80', count: 18 },
          //   { range: '81-100', count: 8 }
          // ]

          // 模拟题目正确率数据
          const accuracyStats = [
            {questionNo: '第1题', accuracy: 85.5, questionType: '单选题'},
            {questionNo: '第2题', accuracy: 72.3, questionType: '单选题'},
            {questionNo: '第3题', accuracy: 91.2, questionType: '判断题'},
            {questionNo: '第4题', accuracy: 68.7, questionType: '多选题'},
            {questionNo: '第5题', accuracy: 79.4, questionType: '单选题'},
            {questionNo: '第6题', accuracy: 56.8, questionType: '填空题'},
            {questionNo: '第7题', accuracy: 43.2, questionType: '简答题'},
            {questionNo: '第8题', accuracy: 88.9, questionType: '判断题'},
            {questionNo: '第9题', accuracy: 65.1, questionType: '多选题'},
            {questionNo: '第10题', accuracy: 74.6, questionType: '单选题'}
          ]

          this.analysisDialog.analysisData = {
            questionTypeStats,
            scoreDistribution,
            accuracyStats
          }

          this.analysisDialog.loading = false
          this.$nextTick(() => {
            this.initCharts()
          })
        }, 1000)

      })
    },
    /** 获取分析数据 */
    getAnalysisData01(params) {
      console.log('getAnalysisData', params)
      listAnswerStatistics(params).then(response => {
        // 模拟获取分析数据，实际应该调用后端API
        setTimeout(() => {
          const scoreDistribution = response.data.questionScoreStatistics
          const questionTypeStats = response.data.classificationStatistics
          console.log('questionTypeStats', questionTypeStats)
          console.log('scoreDistribution', scoreDistribution)
          // 模拟题型分析数据
          // const questionTypeStats = [
          //   { name: '单选题', count: 15, totalScore: 30, avgScore: 25.5 },
          //   { name: '多选题', count: 8, totalScore: 24, avgScore: 18.2 },
          //   { name: '判断题', count: 10, totalScore: 10, avgScore: 8.7 },
          //   { name: '填空题', count: 5, totalScore: 15, avgScore: 12.3 },
          //   { name: '简答题', count: 3, totalScore: 21, avgScore: 16.8 }
          // ]
          //
          // // 模拟分数分布数据
          // const scoreDistribution = [
          //   { range: '0-20', count: 2 },
          //   { range: '21-40', count: 5 },
          //   { range: '41-60', count: 12 },
          //   { range: '61-80', count: 18 },
          //   { range: '81-100', count: 8 }
          // ]

          // 模拟题目正确率数据
          const accuracyStats = [
            {questionNo: '第1题', accuracy: 85.5, questionType: '单选题'},
            {questionNo: '第2题', accuracy: 72.3, questionType: '单选题'},
            {questionNo: '第3题', accuracy: 91.2, questionType: '判断题'},
            {questionNo: '第4题', accuracy: 68.7, questionType: '多选题'},
            {questionNo: '第5题', accuracy: 79.4, questionType: '单选题'},
            {questionNo: '第6题', accuracy: 56.8, questionType: '填空题'},
            {questionNo: '第7题', accuracy: 43.2, questionType: '简答题'},
            {questionNo: '第8题', accuracy: 88.9, questionType: '判断题'},
            {questionNo: '第9题', accuracy: 65.1, questionType: '多选题'},
            {questionNo: '第10题', accuracy: 74.6, questionType: '单选题'}
          ]

          this.analysisDialog.analysisData = {
            questionTypeStats,
            scoreDistribution,
            accuracyStats
          }

          this.analysisDialog.loading = false
          this.answerListDialog.visible = false
          this.answerListDialog.queryParams = {}
          this.$nextTick(() => {
            this.initCharts()
          })
        }, 1000)

      })
    },


    /** 初始化图表 */
    initCharts() {
      this.initQuestionTypeChart()
      this.initScoreChart()
      this.initAccuracyChart()
    },

    /** 初始化题型分析图表 */
    initQuestionTypeChart() {
      const chart = this.$echarts.init(this.$refs.questionTypeChart)
      const data = this.analysisDialog.analysisData.questionTypeStats

      const option = {
        title: {
          text: '题型统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['题目数量', '总分'],
          top: 30
        },
        xAxis: {
          type: 'category',
          data: data.map(item => item.name)
        },
        yAxis: [
          {
            type: 'value',
            name: '题目数量',
            position: 'left'
          },
          {
            type: 'value',
            name: '总分',
            position: 'right'
          }
        ],
        series: [
          {
            name: '题目数量',
            type: 'bar',
            data: data.map(item => item.count),
            itemStyle: {
              color: '#409EFF'
            }
          },
          {
            name: '总分',
            type: 'line',
            yAxisIndex: 1,
            data: data.map(item => item.totalScore),
            itemStyle: {
              color: '#67C23A'
            }
          }
        ]
      }

      chart.setOption(option)
    },

    /** 初始化分数分布图表 */
    initScoreChart() {
      const chart = this.$echarts.init(this.$refs.scoreChart)
      const data = this.analysisDialog.analysisData.scoreDistribution

      const option = {
        title: {
          text: '题目分数',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: data.map(item => item.range)
        },
        yAxis: {
          type: 'value',
          name: '总分'
        },
        series: [
          {
            name: '总分',
            type: 'bar',
            data: data.map(item => item.count),
            itemStyle: {
              color: '#E6A23C'
            }
          }
        ]
      }

      chart.setOption(option)
    },

    /** 初始化正确率图表 */
    initAccuracyChart() {
      const chart = this.$echarts.init(this.$refs.accuracyChart)
      const data = this.analysisDialog.analysisData.accuracyStats

      const option = {
        title: {
          text: '题目正确率分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: data.map(item => item.questionNo),
          axisLabel: {
            rotate: 45
          }
        },
        yAxis: {
          type: 'value',
          name: '正确率(%)',
          max: 100
        },
        series: [
          {
            name: '正确率',
            type: 'bar',
            data: data.map(item => ({
              value: item.accuracy,
              itemStyle: {
                color: item.accuracy >= 80 ? '#67C23A' :
                  item.accuracy >= 60 ? '#E6A23C' : '#F56C6C'
              }
            }))
          }
        ]
      }

      chart.setOption(option)
    },

    /** 用户答卷分析（仅该用户，题型统计） */
    handleUserAnalyze(answer) {
      if (!answer) return
      this.userAnalysisDialog.visible = true
      this.userAnalysisDialog.loading = true
      this.userAnalysisDialog.name = answer.name
      this.userAnalysisDialog.school = answer.school
      this.userAnalysisDialog.phone = answer.phone
      this.userAnalysisDialog.answer = answer
      const questions = Array.isArray(answer.frameTextContent) ? answer.frameTextContent : []
      this.userAnalysisDialog.questionTypeStats = this.computeClassificationStatsFromQuestions(questions)
      this.userAnalysisDialog.loading = false
    },

    /** 计算传入题目集合的题型统计 */
    computeClassificationStatsFromQuestions(questions) {
      if (!Array.isArray(questions)) return []
      const classificationMap = new Map()
      questions.forEach(question => {
        const classification = question.questionClassification || '未分类'
        if (!classificationMap.has(classification)) {
          const cls = this.getClassificationName(classification) || {}
          classificationMap.set(classification, {
            name: cls.dictLabel || classification,
            count: 0,
            totalScore: 0,
            dictSort: typeof cls.dictSort !== 'undefined' ? Number(cls.dictSort) : 9999
          })
        }
        const stat = classificationMap.get(classification)
        stat.count += 1
        // 累加该题得分（根据选中答案与选项分值）
        const opts = question.options || question.optionJson || []
        // 支持 single/true_or_false 的 selectedAnswer，和 multiple 的 selectedAnswers
        const selectedSingles = question.selectedAnswer
        const selectedMultiples = question.selectedAnswers
        if (selectedSingles) {
          const arr = Array.isArray(selectedSingles) ? selectedSingles : String(selectedSingles).split(',')
          arr.forEach(ans => {
            const opt = opts.find(o => o.prefix === String(ans).trim())
            if (opt && opt.score) stat.totalScore += Number(opt.score)
          })
        } else if (Array.isArray(selectedMultiples)) {
          selectedMultiples.forEach(ans => {
            const opt = opts.find(o => o.prefix === String(ans).trim())
            if (opt && opt.score) stat.totalScore += Number(opt.score)
          })
        }
      })
      const stats = Array.from(classificationMap.values())
      stats.sort((a, b) => (a.dictSort || 0) - (b.dictSort || 0))
      return stats
    },
    /** 查看答卷按钮操作 */
    handleViewAnswers(row) {
      this.answerListDialog.examPaperId = row.id
      this.answerListDialog.title = row.title
      this.answerListDialog.totalScore = row.score
      this.answerListDialog.visible = true
      this.answerListDialog.queryParams.examPaperId = row.id
      this.answerListDialog.queryParams.pageNum = 1
      this.getAnswerList()
    },

    /** 获取答卷列表 */
    getAnswerList() {
      this.answerListDialog.loading = true
      listAnswer(this.answerListDialog.queryParams).then(response => {
        this.answerListDialog.answerList = response.rows
        this.answerListDialog.total = response.total
        this.answerListDialog.loading = false
      })
    },

    /** 学校筛选变化 */
    onSchoolFilterChange() {
      // 重置到第一页，并尝试后端筛选；若后端不支持，将由前端computed过滤
      this.answerListDialog.queryParams.pageNum = 1
      this.getAnswerList()
    },

    /** 查看答卷详情 */
    handleViewAnswerDetail(answer) {
      const id = answer.id
      getAnswer(id).then(response => {
        const detail = response.data || {}
        this.answerDetailDialog.answerDetail = detail
        this.answerDetailDialog.paperInfo = detail.frameTextContent
        this.answerDetailDialog.visible = true
      })
    },

    /** 格式化时间 */
    formatTime(time) {
      if (!time) return '-'
      return new Date(time).toLocaleString('zh-CN')
    },

    /** 获取题目类型名称 */
    getQuestionTypeName(type) {
      const typeMap = {
        'single': '单选题',
        'multiple': '多选题',
        'true_or_false': '判断题',
        'fill_blank': '填空题',
        'essay': '简答题'
      }
      return typeMap[type] || type
    },

    /** 格式化用户答案 */
    formatUserAnswer(question) {
      if (!question) return '未作答'

      // 根据题型处理答案
      switch (question.questionType) {
        case 'single': // 单选题
        case 'true_or_false': // 判断题
          if (question.selectedAnswer) {
            // 根据选项前缀找到对应的选项内容
            const selectedOption = question.optionJson?.find(opt => opt.prefix === question.selectedAnswer)
            if (selectedOption) {
              return `${selectedOption.prefix}. ${selectedOption.content} <span class="score-highlight">${selectedOption.score || 0}分</span>`
            }
            return question.selectedAnswer
          }
          return '未作答'
        case 'multiple': // 多选题
          if (question.selectedAnswers && Array.isArray(question.selectedAnswers)) {
            if (question.selectedAnswers.length > 0) {
              // 根据选项前缀找到对应的选项内容
              const selectedContents = question.selectedAnswers.map(prefix => {
                const option = question.optionJson?.find(opt => opt.prefix === prefix)
                if (option) {
                  return `${option.prefix}. ${option.content} <span class="score-highlight">${option.score || 0}分</span>`
                }
                return prefix
              })
              return selectedContents.join(', ')
            }
          }
          return '未作答'
        case 'fill_blank': // 填空题
        case 'essay': // 简答题
          // 对于填空题和简答题，显示答案和总分
          if (question.selectedAnswer) {
            const totalScore = question.optionJson?.reduce((sum, opt) => sum + (opt.score || 0), 0) || 0
            return `${question.selectedAnswer} <span class="score-highlight">${totalScore}分</span>`
          }
          return '未作答'
        default:
          return question.selectedAnswer || '未作答'
      }
    },

    /** 格式化正确答案 */
    formatCorrectAnswer(question) {
      if (!question || !question.correctJson) return '无正确答案'

      // 根据题型处理正确答案
      switch (question.questionType) {
        case 'single': // 单选题
        case 'true_or_false': // 判断题
          if (question.correctJson) {
            // 根据选项前缀找到对应的选项内容
            const correctOption = question.optionJson?.find(opt => opt.prefix === question.correctJson)
            if (correctOption) {
              return `${correctOption.prefix}. ${correctOption.content} <span class="score-highlight">${correctOption.score || 0}分</span>`
            }
            return question.correctJson
          }
          return '无正确答案'
        case 'multiple': // 多选题
          if (question.correctJson && Array.isArray(question.correctJson)) {
            if (question.correctJson.length > 0) {
              // 根据选项前缀找到对应的选项内容
              const correctContents = question.correctJson.map(prefix => {
                const option = question.optionJson?.find(opt => opt.prefix === prefix)
                if (option) {
                  return `${option.prefix}. ${option.content} <span class="score-highlight">${option.score || 0}分</span>`
                }
                return prefix
              })
              return correctContents.join(', ')
            }
          }
          return '无正确答案'
        case 'fill_blank': // 填空题
        case 'essay': // 简答题
          // 对于填空题和简答题，显示正确答案和总分
          if (question.correctJson) {
            const totalScore = question.optionJson?.reduce((sum, opt) => sum + (opt.score || 0), 0) || 0
            return `${question.correctJson} <span class="score-highlight">${totalScore}分</span>`
          }
          return '无正确答案'
        default:
          return question.correctJson || '无正确答案'
      }
    },

    /** 计算题目分类统计 */
    calculateClassificationStatistics() {
      if (!this.answerDetailDialog.paperInfo || !Array.isArray(this.answerDetailDialog.paperInfo)) {
        return []
      }
      // 按分类分组
      const classificationMap = new Map()
      this.answerDetailDialog.paperInfo.forEach(question => {
        const classification = question.questionClassification || '未分类'

        if (!classificationMap.has(classification)) {
          const cls = this.getClassificationName(classification) || {}
          classificationMap.set(classification, {
            name: cls.dictLabel || classification,
            count: 0,
            totalScore: 0,
            dictSort: typeof cls.dictSort !== 'undefined' ? Number(cls.dictSort) : 9999
          })
        }

        const stat = classificationMap.get(classification)
        stat.count += 1

        // 计算该题的得分
        if (question.selectedAnswer && question.options) {
          const selectedAnswers = Array.isArray(question.selectedAnswer)
            ? question.selectedAnswer
            : question.selectedAnswer.split(',')

          selectedAnswers.forEach(answer => {
            const option = question.options.find(opt => opt.prefix === answer.trim())
            if (option && option.score) {
              stat.totalScore += option.score
            }
          })
        }
      })
      const stats = Array.from(classificationMap.values())
      stats.sort((a, b) => (a.dictSort || 0) - (b.dictSort || 0))
      console.log(stats)
      return stats
    },

    /** 获取分类名称 */
    getClassificationName(classification) {
      return this.question_ClassificationOptions.find(item => item.dictValue === classification);
      // // // 这里可以根据字典数据转换分类名称
      // // const classificationMap = {
      // //   'single': '单选题',
      // //   'multiple': '多选题',
      // //   'true_or_false': '判断题',
      // //   'essay': '问答题',
      // //   'fill_blank': '填空题'
      // // }
      // return classificationMap[classification] || classification
    },
  }
}
</script>

<style scoped>
.exampaper-item-box {
  margin-top: 10px;
  margin-bottom: 15px;
}

.no-questions-tip {
  text-align: center;
  color: #909399;
  padding: 20px;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  margin-top: 10px;
}

.no-questions-tip i {
  margin-right: 5px;
}

/* 答卷列表样式 */
.answer-card {
  margin-bottom: 15px;
  cursor: pointer;
  transition: all 0.3s;
}

.answer-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.answer-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
  background: linear-gradient(45deg, #409EFF, #67C23A);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-name {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.user-school {
  font-size: 14px;
  color: #909399;
  display: flex;
  align-items: center;
  gap: 4px;
}

.user-school i {
  font-size: 12px;
}

.score-info {
  text-align: right;
}

.score-main {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.score-total {
  font-size: 14px;
  color: #909399;
}

.answer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #606266;
  font-size: 14px;
}

/* 答卷详情样式 */
.detail-user-card {
  margin-bottom: 20px;
}

.detail-paper-card {
  margin-bottom: 20px;
}

.detail-answers-card {
  margin-bottom: 20px;
}

.card-header {
  font-weight: 600;
  color: #303133;
}

.detail-info-item {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.detail-info-item label {
  font-weight: 500;
  color: #606266;
  min-width: 80px;
  margin-right: 8px;
}

.question-answer-item {
  border: 1px solid #EBEEF5;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.question-number {
  font-weight: 600;
  color: #303133;
}

.question-content {
  margin-top: 8px;
}

.answer-content {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #EBEEF5;
}

.user-answer, .correct-answer {
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
}

.user-answer label, .correct-answer label {
  font-weight: 500;
  color: #606266;
  min-width: 80px;
  margin-right: 8px;
  flex-shrink: 0;
}

.answer-text {
  flex: 1;
  word-break: break-word;
}

.answer-text.correct {
  color: #67C23A;
  font-weight: 500;
}

.answer-text.incorrect {
  color: #F56C6C;
}

/* 分数显示样式 */
.answer-text {
  position: relative;
}


/* 为分数添加特殊样式 */
.score-highlight {
  background: linear-gradient(45deg, #409EFF, #67C23A);
  color: white;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  margin-left: 8px;
  display: inline-block;
}

/* 题目选项样式 */
.question-options {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.question-options label {
  font-weight: 600;
  color: #495057;
  margin-bottom: 10px;
  display: block;
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-item {
  display: flex;
  align-items: flex-start;
  padding: 8px 12px;
  background-color: white;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  transition: all 0.2s ease;
}

.option-item:hover {
  border-color: #adb5bd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.option-prefix {
  font-weight: 600;
  color: #6c757d;
  margin-right: 8px;
  min-width: 20px;
}

.option-content {
  font-size: 14px;
  line-height: 1.5;
  color: #495057;
  line-height: 1.5;
}

.option-score {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  margin-left: 12px;
  white-space: nowrap;
}

/* 无数据提示样式 */
.no-data-tip {
  text-align: center;
  padding: 40px 20px;
  color: #909399;
}

.no-data-tip i {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.no-data-tip p {
  margin: 0;
  font-size: 14px;
}

/* 答卷分析样式 */
.analysis-card {
  margin-bottom: 20px;
}

.analysis-card .card-header {
  font-weight: 600;
  color: #303133;
  font-size: 16px;
}

/* 题目分类统计样式 */
.classification-stats-card {
  margin-bottom: 20px;
}

.classification-stats-card .card-header {
  font-weight: 600;
  color: #303133;
  font-size: 16px;
}

.count-text {
  font-weight: 600;
  color: #409eff;
}

.score-text {
  font-weight: 600;
  color: #67c23a;
}

.avg-score-text {
  font-weight: 600;
  color: #e6a23c;
}

/* 答卷卡片底部元信息布局 */
.answer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}

.answer-meta .meta-left {
  color: #606266;
  display: flex;
  align-items: center;
}

.answer-meta .meta-left i {
  margin-right: 6px;
}

.answer-meta .meta-right {
  display: flex;
  align-items: center;
}
</style>
